<template>
  <div style="padding:0px;">
    <el-form :model="tableData" :rules="rules" label-width="100px" ref="dialogForm">
      <el-card class="box-card">
        <div class="text item">
          <el-form-item label="经销商名称">
            <el-input v-model="tableData.dealerName" disabled auto-complete="off"></el-input>
          </el-form-item>
           <pinpai v-if="code" :dealerArray="dealerArray"  :id="tableData.carBrandId"  @pinpai="checkPinpai"  :Choice="false" ></pinpai>
          <el-form-item label="公司简介">
            <el-input v-model="tableData.companyProfile" :maxlength="200" type="textarea" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="tableData.companyTelephone" :maxlength="11" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="tableData.companyEmail" :maxlength="30" auto-complete="off"></el-input>
          </el-form-item>
           <el-form-item label="公司网址">
            <el-input v-model="tableData.companyHomepage" :maxlength="30" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="公司logo">
            <qiniu :qiniuImage="qiniuImage" :packJson="packJson" :id="qiniuImage.id" :canDelete="true"></qiniu>
          </el-form-item>
        </div>
      </el-card>
      <div style="text-align:right;margin-top:15px;">
        <el-button @click="returnBack">返 回</el-button>
        <el-button type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
      </div>

    </el-form>
  </div>
</template>

<script>
  import agentHttp from '@/utils/agentHttp.js'
  import {
    require,
    phone,
    decimalFour,
    numOrEnglish,
    max100,
    isCard
  } from '@/utils/rules.js';
  import qiniu from '@/views/qiniu/upload';
  import pinpai from "@/views/pinpai/pinpai";
  export default {
    data() {
      return {
        tableData: {},
        dealerArray: [],  //所有品牌
        checkBrand:[],    //已选择的品牌
        code:false, //控制品牌是否显示
        rules: {
          companyTelephone: [require('手机号码', {
            trigger: "blur"
          }), {
            validator: phone,
            trigger: "blur"
          }],
          carBrandId: [require('主营品牌')],
        },
        packJson: {
          maxLength: 1, //最大图片数量
          minLength: 1, //最大图片数量
          accept: "", //image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
          size: 4, //图片大小  单位兆
        },
         qiniuImage:{
		        	id:"qiniuImage", //图片预览的id   
		        	image_uri:[]    //图片上传的列表  只含有url地址
		        },
      }
    },
    props: ['messageVisible'],
    components: {
      qiniu,pinpai
    },
    methods: {
      returnBack() {
        this.messageVisible.dialogFormVisible = false;
      },
      submitConfirmForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 掉接口
            this.tableData.companyLogo = this.qiniuImage.image_uri.join(",");
            agentHttp.postJson('adminApi/admin/dealer_company/update', this.tableData).then((data) => {
              if (data.success) {
                this.$emit('refreshTableData', null);
                this.messageVisible.dialogFormVisible = false;
                this.$message.success(data.data || "修改成功");
              }
            })
          } else {
            this.$nextTick(() => {
              setTimeout(() => {
                this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);
              }, 500)
              return false;
            })
          }
        });
      },
      selectData() {
        agentHttp.get('adminApi/admin/dealer_company/view/' + this.messageVisible.id).then((data) => {
          if (data.success) {
            this.tableData = data.data;
            this.qiniuImage.image_uri =  this.tableData.companyLogo ? this.tableData.companyLogo.split(',').notempty() : []
            this.code = true ;
           console.dir(2222222222 )
            
          }
        })

      },
      select_get_id(id) { //加载经销商,匹配logo
        agentHttp.get(`adminApi/admin/dictionary/find_all_car_brand`).then((data) => {
          if (data.success) {
            // this.code = true ;
            var t =new RegExp(",");
            this.dealerArray = data.data
             data.data.map((res,index)=>{
                if(t.test(res.icon)){
                     this.dealerArray[index].icon =    res.icon.substring(0,res.icon.length-1)
                }
            })
          }
        })
      },
      checkPinpai(e){     //选择主营品牌
          this.tableData.carBrandId = e ;
      },
    },
    created() {
      this.selectData();
      this.select_get_id();

    },
  
  }
</script>

<style lang="scss" scoped>

  .imgs{
        width:24px;
        height:24px;
    }
 .el-row,.el-col,.el-col-12{

   display:flex;
 }
</style>
